<template>
  <a-list
    size="large"
    rowKey="id"
    :loading="loading"
    itemLayout="vertical"
    :dataSource="data"
  >
    <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
      <template slot="actions">
        <icon-text type="star-o" :text="item.star" />
        <icon-text type="like-o" :text="item.like" />
        <icon-text type="message" :text="item.message" />
      </template>
      <a-list-item-meta>
        <a slot="title" href="javascript:void(0)">{{ item.title }}</a>
        <template slot="description">
          <span>
            <a-tag v-for="tag in item.tags" :key="tag">{{ tag }}</a-tag>
          </span>
        </template>
      </a-list-item-meta>
      <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
    </a-list-item>
    <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
      <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
    </div>
  </a-list>
</template>

<script>
import { ArticleListContent } from '@/components'
import IconText from '@/views/list/search/components/IconText'

export default {
  name: 'Article',
  components: {
    IconText,
    ArticleListContent
  },
  data () {
    return {
      loading: false,
      loadingMore: false,
      data: [
        {
          id: '1',
          title: '无人机航线规划最佳实践',
          description: '本文介绍了无人机航线规划的最佳实践和技巧，帮助用户更高效地规划航线。',
          owner: '张三',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
          href: '',
          updatedAt: '2023-05-15',
          star: 156,
          like: 88,
          message: 24,
          tags: ['航线规划', '最佳实践', '教程']
        },
        {
          id: '2',
          title: '实时监控系统使用指南',
          description: '详细介绍了实时监控系统的使用方法，包括界面说明、功能介绍和常见问题解答。',
          owner: '李四',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
          href: '',
          updatedAt: '2023-06-22',
          star: 132,
          like: 71,
          message: 18,
          tags: ['实时监控', '使用指南', '教程']
        },
        {
          id: '3',
          title: '无人机数据分析方法与应用',
          description: '探讨了无人机采集数据的分析方法和实际应用场景，帮助用户更好地利用数据价值。',
          owner: '王五',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
          href: '',
          updatedAt: '2023-07-08',
          star: 198,
          like: 102,
          message: 36,
          tags: ['数据分析', '应用场景', '技术']
        },
        {
          id: '4',
          title: '设备管理系统功能详解',
          description: '全面介绍设备管理系统的各项功能，包括设备注册、状态监控、维护记录等。',
          owner: '赵六',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
          href: '',
          updatedAt: '2023-08-12',
          star: 112,
          like: 63,
          message: 15,
          tags: ['设备管理', '功能介绍', '教程']
        },
        {
          id: '5',
          title: '无人机航线执行过程中的常见问题及解决方案',
          description: '总结了无人机航线执行过程中可能遇到的各种问题，并提供了相应的解决方案。',
          owner: '孙七',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
          href: '',
          updatedAt: '2023-09-05',
          star: 176,
          like: 94,
          message: 28,
          tags: ['航线执行', '问题解决', '技巧']
        }
      ]
    }
  },
  methods: {
    loadMore () {
      this.loadingMore = true
      setTimeout(() => {
        this.data = this.data.concat([
          {
            id: '6',
            title: '系统安全性能优化指南',
            description: '介绍了提高系统安全性和性能的各种方法，包括数据加密、访问控制和性能调优等。',
            owner: '周八',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
            href: '',
            updatedAt: '2023-10-18',
            star: 145,
            like: 82,
            message: 22,
            tags: ['系统安全', '性能优化', '技术']
          },
          {
            id: '7',
            title: '无人机航拍技巧与后期处理',
            description: '分享了无人机航拍的各种技巧和后期图像处理方法，帮助用户获取更高质量的航拍成果。',
            owner: '吴九',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
            href: '',
            updatedAt: '2023-11-02',
            star: 187,
            like: 105,
            message: 31,
            tags: ['航拍技巧', '图像处理', '教程']
          },
          {
            id: '8',
            title: '系统更新日志与新功能介绍',
            description: '详细记录了系统各版本的更新内容，并介绍了最新版本中的新功能和改进。',
            owner: '郑十',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
            href: '',
            updatedAt: '2023-12-15',
            star: 98,
            like: 56,
            message: 14,
            tags: ['系统更新', '新功能', '公告']
          }
        ])
        this.loadingMore = false
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
